<template>
  <div class="config-container">
    <div class="page-header">
      <h1>流程配置</h1>
      <p>管理和部署业务流程模型</p>
    </div>

    <div class="config-content">
      <div class="deployed-processes">
        <h2>已部署流程</h2>
        <div class="process-table">
          <div class="table-header">
            <span>流程名称</span>
            <span>版本</span>
            <span>状态</span>
            <span>部署时间</span>
            <span>操作</span>
          </div>
          <div class="table-row">
            <span>请假审批流程</span>
            <span>v2.1</span>
            <span><span class="status-badge active">已激活</span></span>
            <span>2023-07-10 14:30</span>
            <span>
                    <button class="btn-text">编辑</button>
                    <button class="btn-text">监控</button>
                  </span>
          </div>
          <div class="table-row">
            <span>采购申请流程</span>
            <span>v1.5</span>
            <span><span class="status-badge active">已激活</span></span>
            <span>2023-07-05 09:15</span>
            <span>
                    <button class="btn-text">编辑</button>
                    <button class="btn-text">监控</button>
                  </span>
          </div>
          <div class="table-row">
            <span>报销审批流程</span>
            <span>v3.2</span>
            <span><span class="status-badge suspended">已挂起</span></span>
            <span>2023-06-28 16:45</span>
            <span>
                    <button class="btn-text">编辑</button>
                    <button class="btn-text">监控</button>
                  </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import {reactive, computed, ref} from "vue";
import type {ProcessInstance} from "@/views/Test/components/Test7/type/taskType";
</script>


<style scoped>

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 页面头部 */
.page-header {
  margin-bottom: 24px;
}

.page-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 8px;
}

.page-header p {
  color: #64748B;
}

.task-main h3 {
  color: #1E293B;
  margin-bottom: 8px;
  font-weight: 600;
}

.btn-text {
  background: transparent;
  border: none;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748B;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-text:hover {
  color: #6366F1;
  background: #F8FAFC;
}


.process-main h3 {
  color: #1E293B;
  margin-bottom: 8px;
  font-weight: 600;
}

/* 配置页面 */
.config-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.config-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}


.config-card h3 {
  color: #1E293B;
  margin-bottom: 8px;
  font-weight: 600;
}

.config-card p {
  color: #64748B;
  margin-bottom: 16px;
}

.deployed-processes {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.deployed-processes h2 {
  color: #1E293B;
  margin-bottom: 16px;
  font-weight: 600;
}

.process-table {
  display: flex;
  flex-direction: column;
}

.table-header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr 1.5fr;
  padding: 12px 16px;
  background: #F8FAFC;
  border-radius: 8px;
  font-weight: 600;
  color: #64748B;
  font-size: 0.9rem;
}

.table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr 1.5fr;
  padding: 16px;
  border-bottom: 1px solid #F1F5F9;
  align-items: center;
}

.table-row:last-child {
  border-bottom: none;
}

.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.status-badge.active {
  background: #ECFDF5;
  color: #047857;
}

.status-badge.suspended {
  background: #FEF3C7;
  color: #B45309;
}

@media (max-width: 640px) {

  .table-header, .table-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}
</style>